<template>
	<div>
		<el-table :data="data" ref="table" v-bind="$attrs">
			<TableColumn
				v-for="item in tableColumns"
				:config="item"
				:model="model"
				:state="_state">
				<template v-for="slotName of columnSlots(item)" #[slotName]>
					<slot
						:name="slotName"
						v-if="hasOwnPrototype($slots, slotName)"></slot>
				</template>
				<template
					v-for="slotName of columnSlots(item)"
					#[slotName]="scope">
					<slot
						v-if="hasOwnPrototype($scopedSlots, slotName)"
						:name="slotName"
						:row="scope.row || {}"
						:[`$index`]="scope.$index"></slot>
				</template>
				<template v-for="slotName of slots(item)" #[slotName]>
					<slot
						:name="slotName"
						v-if="hasOwnPrototype($slots, slotName)"></slot>
				</template>
				<template v-for="slotName of slots(item)" #[slotName]="scope">
					<slot
						v-if="hasOwnPrototype($scopedSlots, slotName)"
						:name="slotName"
						:row="scope.row || {}"
						:[`$index`]="scope.$index"></slot>
				</template>
			</TableColumn>
		</el-table>
	</div>
</template>
<script>
	import TableColumn from '../tableColumn/index.vue';
	export default {
		name: 'ATable',
		components: {
			TableColumn,
		},
		props: {
			value: {
				type: Array,
				default: () => [],
			},
			config: {
				type: Object | Array,
				default: () => [],
			},
			model: {
				type: String,
				default: '',
			},
		},
		data() {
			return {};
		},
		filters: {},

		computed: {
			data: {
				get() {
					return this.useVModel.call(this);
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			tableColumns: {
				get() {
					if (Array.isArray(this.config)) {
						return this.config;
					} else {
						if (typeof this.config === 'object') {
							return [this.config];
						} else {
							throw new Error('tableColumns 类型错误');
						}
					}
				},
				set(val) {
					this.$emit('update:tableColumns', val);
				},
			},
			_state() {
				let state = undefined;
				if (typeof this.$attrs.state === 'function') {
					state = this.$attrs.state({ data: this.data });
				} else if (typeof this.$attrs.state === 'string') {
					state = this.$attrs.state;
				}
				return state;
			},
		},
		watch: {},
		created() {},
		mounted() {
			this.refRedirect.call(this, 'table');
		},
		methods: {
			columnSlots(item) {
				if (this.Empty(item?.columnSlot)) return [];
				let slots = [];
				if (typeof item.columnSlot === 'function') {
					slots = item.columnSlot({
						row: this.data,
						index: this.index,
					});
				}
				if (Array.isArray(item.columnSlot)) {
					slots = item.columnSlot;
				}
				if (typeof item.columnSlot === 'string') {
					slots = item.columnSlot.split(',');
				}
				return slots;
			},
			slots(item) {
				let slots = [];
				if (typeof item.slot === 'function') {
					slots = item.slot({
						row: this.data,
						index: this.index,
					});
				}
				if (Array.isArray(item.slot)) {
					slots = item.slot;
				}
				if (typeof item.slot === 'string') {
					slots = item.slot.split(',');
				}

				let columnSlots = [];
				if (typeof item.columnSlot === 'function') {
					columnSlots = item.columnSlot({
						row: this.data,
						index: this.index,
					});
				}
				if (Array.isArray(item.columnSlot)) {
					columnSlots = item.columnSlot;
				}
				if (typeof item.columnSlot === 'string') {
					columnSlots = item.columnSlot.split(',');
				}
				return [...slots, ...columnSlots];
			},
			hasOwnPrototype(obj, key) {
				if (typeof obj !== 'object') return false;
				return Reflect.has(obj, key);
			},
		},
	};
</script>
<style lang="scss" scoped>
	.form {
		width: 100%;
		padding-top: 10px;
		// padding: 15px 0;
		// display: grid;
		// gap: var(--gap);
		// grid-template-columns: repeat(var(--column), minmax(0, 1fr));
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-between;
		gap: 5px 2%;
	}
	// .writeBox {
	//     display: flex;
	//     flex-direction: column;
	//     ::v-deep .el-form-item__label {
	//         text-align: left;
	//         margin-bottom: 8px;
	//     }
	//     ::v-deep .el-form-item__content {
	//         margin-left: 0 !important;
	//     }
	// }

	.readBox {
		::v-deep div.block {
			width: 100%;
		}
		::v-deep .el-form-item {
			box-sizing: border-box;
			width: 32%;
			min-width: 300px;
			font-size: 14px;
			display: flex;

			.el-form-item__label {
				font-size: 14px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				// line-height: 22px;
				text-align: left;
				// margin-bottom: 8px;
				padding: 0;
				// width: fit-content !important;
				word-break: break-all;
				white-space: nowrap;
				color: #8c8c8c;
				min-width: 0;
			}
			.el-form-item__content {
				flex: 1;
				font-size: 14px;
				margin-left: 5px !important;
				// line-height: normal;
				height: auto !important;
				font-weight: 500;
				color: #333;
				min-width: 0;
				// line-height: 22px;
			}
		}
		::v-deep .el-form-item:last-child {
			margin-right: auto !important;
		}
	}

	.writeBox {
		::v-deep div.block {
			width: 100%;
		}
		::v-deep .el-form-item {
			box-sizing: border-box;
			width: 32%;
			min-width: 200px;
			font-size: 14px;
			display: flex;
			flex-direction: column;
			.el-form-item__label {
				width: 100% !important;
				font-size: 14px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #464646;
				line-height: 22px;
				text-align: left;
				margin-bottom: 8px;
			}
			.el-form-item__content {
				margin-left: 0 !important;
				// line-height: normal;
				height: auto !important;
				font-weight: 500;
				color: #333;
			}
		}
		::v-deep .el-form-item:last-child {
			margin-right: auto !important;
		}
	}
</style>
